<template>
  <div class="main">
    <div class="top">
      <div class="top1">
        <img src="../../assets/yjw_03.gif" alt="" />
      </div>
      <div class="top2">
        <div class="top3">
          <div>朝阳校区</div>
          <div>
            <el-col :span="23">
              <el-menu>
                <el-submenu index="1">
                  <template #title>
                    <i class="el-icon-location"></i>
                    <span>会员中心</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="1-1">账号信息</el-menu-item>
                    <el-menu-item index="1-2">修改密码</el-menu-item>
                  </el-menu-item-group>
                  <el-menu-item index="1-3" @click="out()"
                    >退出登陆</el-menu-item
                  >
                </el-submenu>
              </el-menu>
            </el-col>
          </div>
        </div>
      </div>
    </div>
    <div class="bodyads">
      <div class="bodyleft">
        <div
          class="falset"
          @mouseover="mouseover"
          :style="style"
          @mouseout="mouseout"
        >
          <router-link to="/main">
            <div class="el-icon-price-tag"></div>
            <div class="adda">首页</div>
          </router-link>
        </div>
        <div
          class="falset"
          @mouseover="mouseover1"
          :style="style1"
          @mouseout="mouseout"
        >
          <router-link to="/StudentManagement">
            <div class="el-icon-user"></div>
            <div class="adda">学员管理</div>
          </router-link>
        </div>
        <div
          class="falset"
          @mouseover="mouseover2"
          :style="style2"
          @mouseout="mouseout"
        >
          <router-link to="/classManagements">
            <div class="el-icon-folder-remove"></div>
            <div class="adda">班级管理</div>
          </router-link>
        </div>
        <div
          class="falset"
          @mouseover="mouseover3"
          :style="style3"
          @mouseout="mouseout"
        >
          <router-link to="/AttendanceManagement">
            <div class="el-icon-folder-checked"></div>
            <div class="adda">考勤管理</div>
          </router-link>
        </div>
        <div
          class="falset"
          @mouseover="mouseover4"
          :style="style4"
          @mouseout="mouseout"
        >
          <router-link to="/classadd">
            <div class="el-icon-pie-chart"></div>
            <div class="adda">课时汇总</div>
          </router-link>
        </div>
        <div
          class="falset"
          @mouseover="mouseover5"
          :style="style5"
          @mouseout="mouseout"
        >
          <el-popover placement="right" :width="183" trigger="hover">
            <template #reference>
              <div>
                <div class="el-icon-setting"></div>
                <div class="adda">其他设置</div>
              </div>
            </template>
            <div class="Popover">
              <router-link to="/curriculum">
                <div
                  @mouseover="mouseover6"
                  :style="style6"
                  @mouseout="mouseout"
                >
                  课程管理
                </div>
              </router-link>
              <router-link to="/classroom">
                <div
                  @mouseover="mouseover7"
                  :style="style7"
                  @mouseout="mouseout"
                >
                  教室管理
                </div>
              </router-link>
              <router-link to="/teacher">
                <div
                  @mouseover="mouseover8"
                  :style="style8"
                  @mouseout="mouseout"
                >
                  教师管理
                </div></router-link
              >
              <router-link to="/accountNumber">
                <div
                  @mouseover="mouseover9"
                  :style="style9"
                  @mouseout="mouseout"
                >
                  账号管理
                </div>
              </router-link>
            </div>
          </el-popover>
        </div>
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      style: "",
      style1: "",
      style2: "",
      style3: "",
      style4: "",
      style5: "",
      style6: "",
      style7: "",
      style8: "",
      style9: "",
      options: [
        {
          value: "选项1",
          label: "账号管理",
        },
        {
          value: "选项2",
          label: "修改密码",
        },
        {
          value: "选项3",
          label: "退出登陆",
        },
      ],
      value: "",
    };
  },
  mounted() {},
  methods: {
    // 退出
    out() {
      window.sessionStorage.clear();
      this.$router.push({ path: "/" });
      this.$message.success("退出成功");
    },
    // 左侧导航栏鼠标移上加背景实现
    mouseover() {
      this.style = "background-color:rgb(151, 222, 243);border-radius:5px";
    },
    mouseover1() {
      this.style1 = "background-color:rgb(151, 222, 243);border-radius:5px";
    },
    mouseover2() {
      this.style2 = "background-color:rgb(151, 222, 243);border-radius:5px";
    },
    mouseover3() {
      this.style3 = "background-color:rgb(151, 222, 243);border-radius:5px";
    },
    mouseover4() {
      this.style4 = "background-color:rgb(151, 222, 243);border-radius:5px";
    },
    mouseover5() {
      this.style5 = "background-color:rgb(151, 222, 243);border-radius:5px";
    },
    mouseover6() {
      this.style6 = "background-color:rgb(151, 222, 243);border-radius:5px";
    },
    mouseover7() {
      this.style7 = "background-color:rgb(151, 222, 243);border-radius:5px";
    },
    mouseover8() {
      this.style8 = "background-color:rgb(151, 222, 243);border-radius:5px";
    },
    mouseover9() {
      this.style9 = "background-color:rgb(151, 222, 243);border-radius:5px";
    },
    // 左侧导航栏鼠标移上去掉背景实现
    mouseout() {
      (this.style = "background-color:#fff"),
        (this.style1 = "background-color:#fff"),
        (this.style2 = "background-color:#fff"),
        (this.style3 = "background-color:#fff"),
        (this.style4 = "background-color:#fff"),
        (this.style5 = "background-color:#fff");
      this.style6 = "background-color:#fff";
      this.style7 = "background-color:#fff";
      this.style8 = "background-color:#fff";
      this.style9 = "background-color:#fff";
    },
    info1() {},
  },
};
</script>
<style>
.main {
  width: 100%;
  background-color: #fff;
}
.top {
  height: 60px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  line-height: 60px;
}
.top img {
  background-color: #fff;
  margin-left: 20px;
  width: 200px;
  height: 60px;
}
.top3 {
  margin-right: 40px;
  display: flex;
}
.top3 div {
  margin-left: 10px;
}
.bodyads {
  display: flex;
  width: 500%;
}
.bodyleft {
  height: 520px;
  width: 2% !important;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border-right: 20px solid #ddd;
  /* border-image: -webkit-linear-gradient(#ddd, #fff) 20 20;
  border-image: -webkit-linear-gradient(#F80, #2ED) 20 20;
  border-image: -moz-linear-gradient(#F80, #2ED) 20 20;
  border-image: -o-linear-gradient(#F80, #2ED) 20 20; */
  border-image: linear-gradient(rgb(250, 247, 247), rgb(250, 248, 248)) 1;
}

.el-icon-folder-remove,
.el-icon-document,
.el-icon-folder-checked,
.el-icon-pie-chart,
.el-icon-user,
.el-icon-price-tag,
.el-icon-setting {
  font-size: 30px;
  padding: 8px 0;
}
.falset {
  text-align: center;
}
.adda {
  margin: 0 auto;
  text-align: center;
}
.bodyright1xf {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 20px;
}
.bodyright1xf div {
  margin-right: 10px;
}
.Popover {
  text-align: center;
  cursor: pointer;
}
</style>